<template>
    <h2>会员卡统计</h2>
    <button @click="refreshCache">刷新</button>
    <el-table :data="MembershipCard" border="true" style="width: 100%;">
        <el-table-column prop="name" label="会员姓名" width="180" />
        <el-table-column prop="cardNumber" label="卡号" width="180" />
        <el-table-column prop="totalLessons" label="总课次" width="180" />
        <el-table-column prop="usedLessons" label="已用课次" width="180" />
        <el-table-column prop="remainLessons" label="剩余课次" width="180" />
        <el-table-column prop="total" label="总额" width="180" />
        <el-table-column prop="usedAmount" label="已用金额" width="180" />
        <el-table-column prop="remainAmount" label="剩余金额" width="180" />
    </el-table>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {getList} from '@/api/MembershipCardStatistics';
    const MembershipCard=ref([]);
    const fetchData = async() =>{
        try {
          const res = await getList();
          MembershipCard.value=res.data;
      } catch (error) {
          console.error('Error:', error);
          alert('error');
      }
    };

    onMounted(() => {
        fetchData();
    });

    const refreshCache= () =>{
        fetchData();
    };


</script>

<style scoped>

</style>